<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>在线OJ-题目列表</title>
   <style>
       /* 起手式, 100%保证我们的样式设置可以不受默认影响 */
       * {
           /* 消除网页的默认外边距 */
           margin: 0px;
           /* 消除网页的默认内边距 */
           padding: 0px;
       }
       html,
       body {
           width: 100%;
           height: 100%;
       }
       .container .navbar {
           width: 100%;
           height: 50px;
           background-color: black;
           /* 给父级标签设置overflow，取消后续float带来的影响 */
           overflow: hidden;
       }
       .container .navbar a {
           /* 设置a标签是行内块元素，允许你设置宽度 */
           display: inline-block;
           /* 设置a标签的宽度,a标签默认行内元素，无法设置宽度 */
           width: 80px;
           /* 设置字体颜色 */
           color: white;
           /* 设置字体的大小 */
           font-size: large;
           /* 设置文字的高度和导航栏一样的高度 */
           line-height: 50px;
           /* 去掉a标签的下划线 */
           text-decoration: none;
           /* 设置a标签中的文字居中 */
           text-align: center;
       }
       /* 设置鼠标事件 */
       .container .navbar a:hover {
           background-color: green;
       }
       .container .navbar .login {
           float: right;
       }
       .container .question_list {
           padding-top: 50px;
           width: 800px;
           height: 100%;
           margin: 0px auto;
           /* background-color: #ccc; */
           text-align: center;
       }
       .container .question_list table {
           width: 100%;
           font-size: large;
           font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
           margin-top: 50px;
           background-color: rgb(243, 248, 246);
       }
       .container .question_list h1 {
           color: green;
       }
       .container .question_list table .item {
           width: 100px;
           height: 40px;
           font-size: large;
           font-family:'Times New Roman', Times, serif;
       }
       .container .question_list table .item a {
           text-decoration: none;
           color: black;
       }
       .container .question_list table .item a:hover {
           color: blue;
           text-decoration:underline;
       }
       .container .footer {
           width: 100%;
           height: 50px;
           text-align: center;
           line-height: 50px;
           color: #ccc;
           margin-top: 15px;
       }
   </style>
</head>
<body>
   <div class="container">
       <!-- 导航栏， 功能不实现-->
       <div class="navbar">
           <a href="/">首页</a>
           <a href="/all_questions">题库</a>
           <a href="#">竞赛</a>
           <a href="#">讨论</a>
           <a href="#">求职</a>
           <a class="login" href="#">登录</a>
       </div>
       <div class="question_list">
           <h1>OnlineJuge题目列表</h1>
           <table>
               <tr>
                   <th class="item">编号</th>
                   <th class="item">标题</th>
                   <th class="item">难度</th>
               </tr>
               {{#question_list}}
               <tr>
                   <td class="item">{{number}}</td>
                   <td class="item"><a href="/number_question/{{number}}">{{title}}</a></td>
                   <td class="item">{{star}}</td>
               </tr>
               {{/question_list}}
           </table>
       </div>
   </div>
</body>
</html>